<template>
  <view class="container">
    <custom-navbar
      backText="工艺信息"
      @back="goBack"
      :immersive="true"
    ></custom-navbar>
    <view class="container_header" :style="{ paddingTop: `${navbarHeight}px` }">
      <image
        class="container_header_bg"
        src="/static/images/mount_bg.png"
        mode="widthFix"
      />

      <view class="container_header_name">
        <view>{{ productCode }}.{{ partName }}</view>
        <view class="container_header_name_line"></view>
      </view>
    </view>
    <view class="container_main">
      <YSteps
        lineNum="0"
        color="#333"
        backgroundColor="#CFCFCF"
        :infoList="list"
      ></YSteps>
    </view>
  </view>
</template>

<script>
import { processDetail } from "@/api/home.js";
import YSteps from "@/components/Y-Steps/Y-Steps.vue";
import navbarMixin from "@/mixins/navbar.js";
export default {
  mixins: [navbarMixin],
  components: {
    YSteps,
  },
  data() {
    return {
      params: {
        mouldId: "",
        partId: "",
      },
      isLoading: false,
      noMoreData: false,
      productCode: "",
      partName: "",
      list: [],
    };
  },
  onLoad(option) {
    if (option.mouldId) {
      this.params.mouldId = option.mouldId;
    }
    if (option.productCode) {
      this.productCode = option.productCode;
    }
    if (option.partId) {
      this.params.partId = option.partId;
      this.partName = option.partName;
    }

    this.getPartDetail();
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1, // 返回的页面数，如果delta大于现有页面数，则返回到首页
      });
    },

    getPartDetail() {
      if (this.isLoading) return;
      this.isLoading = true;
      uni.showLoading({
        title: "加载中",
      });
      processDetail(this.params)
        .then((res) => {
          this.isLoading = false;
          uni.hideLoading();
          console.log("mould---------" + res);
          this.list = res.content;
        })
        .catch((e) => {
          uni.hideLoading();
          this.isLoading = false;
          uni.showToast({
            title: e.msg,
            icon: "none",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  &_header {
    height: 200rpx;
    background: linear-gradient(to bottom, #e7f4ff, #f4f5f9);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 100rpx;

    &_bg {
      width: 100%;
      position: absolute;
      top: -50%;
      left: -10%;
    }
    &_icon {
      width: 200rpx;
      image {
        width: 100%;
        height: auto;
      }
    }
    &_name {
      margin-left: 20rpx;
      margin-top: 20rpx;
      font-size: 40rpx;

      &_line {
        border-radius: 50rpx;
        width: 250rpx;
        border-bottom: 10rpx solid;
        border-image: linear-gradient(to right, #ffffff 0%, #5687fd 100%) 2 2 2
          2;
      }
    }
  }
  &_main {
    flex: 1;
    background-color: white;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    z-index: 999;
    overflow-y: auto;
  }
}
</style>
